<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border:  1px solid red;"></canvas>
		<script>
			var canvas=document.getElementById("canvas");
			var cxt=canvas.getContext("2d");
			canvas.width=800;
			canvas.height=600;
			var ball={x:300,y:100,r:10,g:2,vx:-4,vy:0,color:"#ff0066"};
			setInterval(function(){
				drawball();
				update();
				
			},50);
			function drawball(){
				cxt.clearRect(0,0,canvas.width,canvas.height);
				cxt.fillStyle=ball.color;
				cxt.beginPath();
				cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
				cxt.fill();
				cxt.closePath();
			}
			function update(){
				ball.x+=ball.vx;
				ball.y+=ball.vy;
				ball.vy+=ball.g;
				if(ball.y>600-2*ball.r){
					ball.vy=-ball.vy*0.6;
				}
			}
		</script>
	</body>
</html>
